1import {useState, useMemo, PropsWithChildren} from 'react';
 2import EventLayout, {TabComponent} from '../../../layouts/Event';
 3import {EventByUuidDocument} from '../../../generated/graphql';
 4import useProfile from '../../../hooks/useProfile';
 5import WaitingList from '../../../containers/WaitingList';
 6import {AddPassengerToWaitingList} from '../../../containers/NewPassengerDialog';
 7import {initializeApollo} from '../../../lib/apolloClient';
 8
 9interface NewPassengerDialogContext {
10  addSelf: boolean;
11}
12
13interface Props {
14  eventUUID: string;
15}
16
17const Page = (props: PropsWithChildren<Props>) => {
18  return <EventLayout {...props} Tab={WaitingListTab} />;
19};
20
21const WaitingListTab: TabComponent = ({event}) => {
22  const {user} = useProfile();
23  const [addPassengerToWaitingListContext, toggleNewPassengerToWaitingList] =
24    useState<NewPassengerDialogContext | null>(null);
25
26  const canAddSelf = useMemo(() => {
27    if (!user) return false;
28    const isInWaitingList = event?.waitingPassengers?.some(
29      passenger => passenger.user?.id === `${user.id}`
30    );
31    const isInTravel = event?.travels?.some(travel =>
32      travel.passengers?.some(passenger => passenger.user?.id === `${user.id}`)
33    );
34    return !(isInWaitingList || isInTravel);
35  }, [event, user]);
36
37  return (
38    <>
39      <WaitingList
40        canAddSelf={canAddSelf}
41        getToggleNewPassengerDialogFunction={(addSelf: boolean) => () =>
42          toggleNewPassengerToWaitingList({addSelf})}
43      />
44      {!!addPassengerToWaitingListContext && (
45        <AddPassengerToWaitingList
46          open={!!addPassengerToWaitingListContext}
47          toggle={() => toggleNewPassengerToWaitingList(null)}
48          addSelf={addPassengerToWaitingListContext.addSelf}
49        />
50      )}
51    </>
52  );
53};
54
55export async function getServerSideProps(ctx) {
56  const {uuid} = ctx.query;
57  const apolloClient = initializeApollo();
58  const {data = {}} = await apolloClient.query({
59    query: EventByUuidDocument,
60    variables: {uuid},
61  });
62  const {eventByUUID: event} = data;
63  const {host = ''} = ctx.req.headers;
64
65  return {
66    props: {
67      event,
68      eventUUID: uuid,
69      metas: {
70        title: event?.name || '',
71        url: `https://${host}${ctx.resolvedUrl}`,
72      },
73    },
74  };
75}
76
77export default Page;